<template>
    <el-button @click="goBack" class="goback">返回</el-button>
    <el-card style="min-width: 480px" class="main">
    <template #header>
      <div class="card-header">
        <div class="title">发布视频</div>
      </div>
    </template>
    <el-form  
        :ref="ruleFormRef"
        :model="formData"
        class="demo-ruleForm"
        style="max-width: 600px">
    <el-form-item label="标题" prop="title" >
        <el-input v-model="formData.title"></el-input>
    </el-form-item>
    <el-form-item label="内容" prop="content" >
      <el-input v-model="formData.content" type="textarea"/>
    </el-form-item>
    <el-form-item label="视频" prop="videoUrl" >
        <el-upload
            class="avatar-uploader"
            action="/api/upload"
            :before-upload="beforeUpload"
            :on-success="handleSuccess"
            :on-error="handleError"
            accept="video/*"
        >
        <video v-if="formData.videoUrl" :src="formData.videoUrl" class="avatar" controls></video>
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      
      </el-upload>
    </el-form-item>
    </el-form>
    <template #footer>      
      <el-button type="primary" @click="submitForm" class="fabu">
        发布
      </el-button>
    </template>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import { useRouter } from "vue-router";
import { Plus } from '@element-plus/icons-vue'
import {addVideoAPI} from '../../api/video'
import { ElMessage } from 'element-plus';
  import useCounter from '../../stores/pinia'
  import { parseJwt } from '../../stores/pinia'

const ruleFormRef = ref(null);
const counterStore=useCounter()
const router=useRouter()
const formData = ref({
    authorId: null,
    videoUrl: "",
    title: '',
    content:'',
});
const goBack=()=>{
  router.push('/video')
}


// 定义请求头，可根据实际需求添加
// const headers = ref({
//   'Authorization': 'Bearer your_token'  // 示例：如果需要身份验证
// });

// 上传前的钩子函数，可用于对文件进行验证
const beforeUpload = (file) => {
    // console.log(file);
  const isVideo = file.type.indexOf('video') > -1;
  if (!isVideo) {
    ElMessage.error('请上传视频文件');
    return false;
  }
  // 可以添加更多验证逻辑，如文件大小限制等
  const isLt200M = file.size / 1024 / 1024 < 200;
  if (!isLt200M) {
    ElMessage.error('视频大小不能超过200MB');
    return false;
  }
  return true;
};

// 上传成功的回调函数
const handleSuccess = (response, file, fileList) => {
  ElMessage.success('视频上传成功');
  formData.value.videoUrl = response.data;
  // console.log('上传成功的响应数据：', response);
};

// 上传失败的回调函数
const handleError = (err, file, fileList) => {
  ElMessage.error('视频上传失败');
  // console.error('上传失败的错误信息：', err);
};

const submitForm=async()=>{
  // console.log("发布的视频",formData.value)
    const result=await addVideoAPI(formData.value)
    // console.log(result);
    // console.log(formData.value)
    if(result.data.code==0){
      formData.value.authorId=""
    formData.value.content=""
    formData.value.videoUrl=""
    formData.value.title=""
    
    ElMessage.success('戏曲发布成功');
    router.push("/video")
    }
}

onMounted(()=>{
  const jwt=counterStore.jwt
  if(jwt!=null){
    formData.value.authorId=parseJwt(jwt).claims.id
  }
})
</script>

<style lang="less" scoped>
.goback{
  position: fixed;
  margin-left: 5%;
  margin-top: 50px;
  font-size:24px;
  color: #474a59;
  padding: 0 6px;
  font-weight: 500;
  border-color: #dbd2d2ac;
  border-bottom: 3px solid #dbd2d2ac;
  background-color: #dbd2d2ac;
}
.main{
    width: 60%;
    background-color: #fff;
    margin: auto;
    margin-top: 50px;
}
.title{
  width: 99px;
  font-size:24px;
  color: #474a59;
  padding: 0 6px;
  font-weight: 500;
  border-color: #dbd2d2ac;
  border-bottom: 3px solid #dbd2d2ac;
  background-color: #dbd2d2ac;
  border-radius: 3px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader{
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader:hover {
  border-color: var(--el-color-primary);
}
.el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.fabu{
  display: block;
  margin: auto;
  width: 30%;
  font-size:24px;
  color: #474a59;
  padding: 0 6px;
  font-weight: 500;
  border-color: #dbd2d2ac;
  border-bottom: 3px solid #dbd2d2ac;
  background-color: #dbd2d2ac;
  /* border-radius: 3px; */
}
</style>